<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>免费发布信息 - {$config['site_name']}</title>
    <link href="__TMPL__skin/css/fafa.css" rel="stylesheet" type="text/css" />
    <link href="__TMPL__skin/css/validator.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://unpkg.com/cropperjs/dist/cropper.css">
	<script type="text/javascript"  language = "javascript" src="__TMPL__skin/js/tools.js"></script>
	<script type="text/javascript"  language = "javascript" src="__TMPL__skin/js/jquery.js"></script> 
    <script src="__TMPL__/skin/js/formvalidator.js" type="text/javascript"></script>
    <script src="__TMPL__/skin/js/formvalidatorregex.js" type="text/javascript"></script>
    <script>
       $(document).ready(function(e) {
		   
		   loadData();
		   
           $("#City002").change(function(){
			      var id = $(this).val();
			       $.get("/index.php?m=Public&a=getarea&id="+id,function(ret){
					   
					        if(ret.status == 1){
								 $("#diqu").html("");
								 var data = ret.result;
								 for(var i=0;i<data.length;i++){
									   var html = '<input type="radio" name="areaid" value="'+data[i].id+'" />'+data[i].name;
									   $("#diqu").append(html);
								 }
								
							    	
						   }else{
							   
							     $("#diqu").html("后台还没添加");
							   }
					   
					   },"json");
			   });
    });
	
	function loadData(){
		  
			       $.get("/index.php?m=Public&a=getarea&id=30",function(ret){
					   
					        if(ret.status == 1){
								 $("#diqu").html("");
								 var data = ret.result;
								 for(var i=0;i<data.length;i++){
									   var html = '<input type="radio" name="areaid" value="'+data[i].id+'" />'+data[i].name;
									   $("#diqu").append(html);
								 }
								
							    	
						   }else{
							   
							     $("#diqu").html("后台还没添加");
							   }
					   
					   },"json"); 
		
		}
    </script>

</head>
<body>

   <include file="Index:header" />
   
       <div class="container">
                <div class="content">
                    <div class="mq"></div>
                    <div class="subheader">
                        <h1>免费发布信息,</h1>
                    </div>

                    <div style="background-color: #f5fff1; border: 1px solid #d0dbb8; padding: 10px; margin: 10px 10px 20px 10px; font-size: 14px; line-height: 24px;">
                        <p><span class="fs">·</span>游客一天可发布<span class="fo fb">0</span>条信息,注册会员一天可发布<span class="fo fb">10</span>条信息,vip一天可发布<span class="fo fb">100</span>条信息,超出限制发布一条需<span class="fo fb">5</span>金币</p>
                        <p><span class="fs">·</span>请不要发布非法或者重复信息,内容请不要包含特殊符号,<b>发布相同标题或相同内容会被删除账户,请珍惜您的账户</b></p>

                    </div>


                    <div class="fafapostpage">


<!--  {:U('xiugai',array('id'=>$info['id']))}  -->

<form method="post" id="form1" enctype="multipart/form-data" >
                        <table border="0" cellpadding="0" cellspacing="0" width="100%" class="fafapost">

                            <tr>
                                <th style="width: 100px;">发布城市：</th>
                                <td class="inputselect">
                                    <select id="City001" name="City001" style="width: 100px">
                                       <volist name="province" id="v">
                                        <if condition="$v['id'] eq $pid ">
                                            <option value="{$v['id']}" selected="selected">{$v['province']}</option>
                                        <else />
                                       <option value="{$v['id']}">{$v['province']}</option>
                                       </if>
                                       </volist>
                                    
                                    </select>
                                    <select id="City002" name="cityid"  style="width: 100px">
                                    	<if condition="$city neq 'all'" >
                                    		 <volist name="citylist" id="v">
		                                          
		                                          <if condition="($v['id'] eq $cityid) AND ($city neq 'all')">                                      
		                                            <option value="{$v['id']}" selected="selected">{$v['city']}</option>
		                                          <else />
		                                            <option value="{$v['id']}">{$v['city']}</option>
		                                          </if>
		                                         
                                             </volist>
                                    		
                                    		<else />
                                    	
                                    		  <if condition="$city eq 'all'">                                      
		                                         	<volist name="beijing" id="v">
		                                            	<option value="{$v['id']}">{$v['city']}</option>
		                                           </volist> 
		                                      </if>		                                                                            	
                                    	</if>                                                                     
                                    </select>
                                  
                                </td>
                            </tr>
                              <tr><th>选择区域：</th>
                              <td class='f14' id="diqu">
                              
                        
                                 <volist name="area" id="v">
                               <input type="radio" name="areaid" value="{$v['id']}" />{$v['name']}
                                </volist>
                         
                  
                                
                                                        </tr>
                             <tr><th>信息类别：</th><td class='f14'>{$catename['name']}　<a href='{:U('Index/publish')}'  class=f12>重新选择类别>></a></td></tr>
                            <tr>
                                <th>标　　题：</th>
                                <td>
                                    <div class="fl">
                                        <input name="titles" type="text" id="titles" class="input" style="width:450px;" /></div>
                                    <span id="titlesTip" class="vt27"></span></td>
                            </tr>
                            <tr>
                                <th>标　　签：</th>
                                <td>
                                    <div class="fl">
                                        <input name="keywords" type="text" maxlength="25" id="keywords" class="input" style="width:280px;" /></div>
                                    <span id="keywordsTip" class="vt27"></span></td>
                            </tr>
                            <tr>
                                <th valign="top">内　　容：</th>
                                <td>
                                    <div class="fl">
                                        <textarea name="neirong" rows="2" cols="20" id="neirong" class="input" style="height:200px;width:504px;"></textarea></div>
                                    <span id="neirongTip" class="vt27"></span></td>
                            </tr>
                            <tr>
                                <th>图片上传：</th>
                                <td style="display: flex; height: 200px;">
                                    <div style="position: relative">
                                        <input type="file" name="photo" id="photo" class="input" style="opacity: 0;position: absolute;width: 300px;height: 200px;z-index: 99;cursor: pointer"/>
                                        <input type="hidden" name="photo_base64" id="photo_base64">
                                        <div style="position: absolute;width: 300px;height: 200px;background: #f46;text-align: center;color: #fff">
                                            <h3 style="margin-top: 60px; font-size: 24px;font-weight: bold;">上传封面图</h3>
                                            <p style="padding: 10px;">选择图片后，请按比例选择剪切，可用鼠标调节，右边有图表示上传后效果！</p>
                                        </div>
                                    </div>
                                    <div style="position: relative;margin-left: 320px;">
                                        <img src="" class="pre-img" style="border: 1px solid #ddd"/>
                                    </div>
                                    <div style="position: relative;width: 300px;margin-left: 20px;">
                                        <img style="max-width: 100%;" id="image" src="">
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <th>企业名称：</th>
                                <td>
                                    <input name="shopname" type="text" value="{$company['name']}" maxlength="120" id="shopname" class="input" /></td>
                            </tr>
                            <tr>
                                <th>联&nbsp;系&nbsp;人：</th>
                                <td>
                                    <div class="fl">
                                        <input name="contact" type="text" value="{$company['contact']}" id="contact" class="input" /></div>
                                    <span id="contactTip" class="vt27"></span></td>
                            </tr>
                            <tr>
                                <th>联系电话：</th>
                                <td>
                                    <div class="fl">
                                        <input name="phone" type="text" value="{$company['phone']}" id="phone" class="input" /></div>
                                    <span id="phoneTip" class="vt27"></span></td>
                            </tr>
                            <tr>
                                <th>联系邮箱：</th>
                                <td>
                                    <div class="fl">
                                        <input name="email" type="text" value="{$company['email']}" id="email" class="input" /></div>
                                        <span id="emailTip" class="vt27"></span>
                                    </td>
                            </tr>

                            <if condition="$uinfo['vip'] eq 1 ">
                                                        <tr>
                                <td colspan="2">

                                    <table border="0" cellpadding="0" cellspacing="0" width="700" style="font-size: 14px; background-color: #FDFDE1; border: 1px solid #CCCCCC;">
                                        <tr>
                                            <td align="right" width="104" style="padding-right: 5px;">联系QQ：</td>
                                            <td><input name="qq" type="text" class="input" id="qq"  />&nbsp;VIP专享</td>
                                        </tr>
                                        <tr>
                                            <td align="right" style="padding-right: 5px;">商务通：</td>
                                            <td><input name="swt" type="text" class="input" id="swt" style="width: 400px;"  />&nbsp;VIP专享</td>
                                        </tr>
                                    </table>

                                </td>
                            </tr>
                            <else />
                                                        <tr>
                                <td colspan="2">

                                    <table border="0" cellpadding="0" cellspacing="0" width="700" style="font-size: 14px; background-color: #FDFDE1; border: 1px solid #CCCCCC;">
                                        <tr>
                                            <td align="right" width="104" style="padding-right: 5px;">联系QQ：</td>
                                            <td><input name="qq" type="text" class="input" id="qq" onclick="visit('/index.php?m=User&a=company');" readonly="readonly" />&nbsp;VIP专享</td>
                                        </tr>
                                        <tr>
                                            <td align="right" style="padding-right: 5px;">联系地址：</td>
                                            <td><input name="swt" type="text" class="input" id="swt" style="width: 400px;" onclick="visit('/index.php?m=User&a=company');" readonly="readonly" />&nbsp;VIP专享</td>
                                        </tr>
                                    </table>

                                </td>
                            </tr>
                            </if>



                            <tr>
                                <th>删除密码：</th>
                                <td>
                                    <div class="fl">
                                        <input name="delpassword" type="text" id="delpassword" class="input" /></div>
                                </td>
                            </tr>
                             
                           <tr>
                                <th>验证码：</th>
                                <td>
                                    <div class="fl">
                                        <input name="verify" type="text" id="verify" class="input" style="width:100px;" />
                                     </div>
                                    <img src="/Admin.php?m=Public&a=verify" alt="验证码,看不清楚?请点击刷新验证码" id="v" style="cursor: pointer; float: left; margin: 2px 3px 0px 3px;"/>
                                    <span id="verifyTip"></span>
                                </td>
                            </tr>
                      
                          

                              

                            <tr>
                                <th></th>
                                <td>
                                 <input  type="hidden" name="cid" value="{$cid}" />
                                <input type="hidden" name="company_id" value="{$company['id']}" />
                               <input type="submit" value="立即发布" name="tijiao" id="tijiao" class="btnf" onclick="show()" /></td>
                        
                            </tr>
                        </table>
  </form>

             </div> 
                </div>
            </div>
     
     <script type="text/javascript">
   
                function yzsetn() {
                    $("#yz").val('');

                }


                $(document).ready(function () {
					
					/*城市级联*/
					$("#City001").change(function(){
						  var cityid = $(this).val();
						   var url = "{:U('getcity',array('id'=>'"+cityid+"'))}";
						   $.get(url,function(data){								
							     $("#City002").html(""); 
								 $("#diqu").html("");
								  $("#City002").append(' <option value="" >请选择</option>');
								 for(var i=0;i<data.length;i++){
									 
									
							       $("#City002").append(' <option value="'+data[i].id+'" >'+data[i].city+'</option>');
								 }

								 
							   },"json");
						
						});
					
					  $("#v").click(function(){
				  var url ="/Admin.php?m=Public&a=verify&t="+ Math.random();
				  $(this).attr('src',url);
			});
					
                    $.formValidator.initConfig({ formid: "form1", onerror: function (msg) { checkSubmitFlg = false; }, onsuccess: function () { } });

             
			 
			/*图片验证*/
                    $("#verify").formValidator({ onshow: "请输入验证码,看不清请点击图片刷新验证码", onfocus: "请输入验证码,看不清请点击图片刷新验证码", oncorrect: "验证码正确" }).inputValidator({ min: 1, max: 10, onerror: "验证码错误,请从新输入" })
                         .ajaxValidator({
                             type: "get",
                             url: "index.php?m=Public&a=checkVerify&verify="+$('#verify').val(),
                             datatype: "json",
                             success: function (data) {								
                                 if (data == "1") {
                                     return true;
                                 }
                                 else {
                                     return false;
                                 }
                             },
                             buttons: $("#submit"),
                             error: function () { alert("服务器没有返回数据，可能服务器忙，请重试"); },
                             onerror: "验证码错误,请从新输入",
                             onwait: "正在对验证码进行合法性校验，请稍候..."
                         });

             /*标题验证*/
             
              $("#titles").formValidator({ onshow: "请输入标题", onfocus: "请输入标题", oncorrect: "输入正确" }).inputValidator({ min: 5, max: 100, onerror: "输入错误,范围5-100字" });
              $("#neirong").formValidator({ onshow: "请输入内容", onfocus: "请输入内容", oncorrect: "输入正确" }).inputValidator({ min: 20, max: 10000, onerror: "请输入20-10000字" });

              $("#keywords").formValidator({ onshow: "请输入标签2-25字内 多个用标签请用 , 号隔开", onfocus: "请输入标签2-25字内 多个用标签请用 , 号隔开", oncorrect: "输入正确" }).inputValidator({ min: 2, max: 50, onerror: "请输入2-50字之间标签 多个用 , 号隔开" });
              
              $("#contact").formValidator({ onshow: "请输入联系人", onfocus: "请输入联系人", oncorrect: "输入正确" }).inputValidator({ min: 2, max: 50, onerror: "请输入2-50字" });
              $("#phone").formValidator({ onshow: "请输入联系电话", onfocus: "请输入联系电话", oncorrect: "输入正确" }).inputValidator({ min: 2, max: 50, onerror: "请输入20-50字" });
              $("#email").formValidator({ onshow: "请输入联系邮箱", onfocus: "请输入联系邮箱", oncorrect: "输入正确" }).inputValidator({ min: 2, max: 50, onerror: "请输入20-50字" });


               });




            </script>
     <script src="https://unpkg.com/cropperjs/dist/cropper.js"></script>
     <script src="__TMPL__/skin/js/jquery-cropper.min.js" type="text/javascript"></script>
       <script type="text/javascript">
                $(function () {

                    'use strict';

                    var console = window.console || { log: function () {} };
                    var URL = window.URL || window.webkitURL;
                    var $image = $('#image');
                    var options = {
                        aspectRatio: 3 / 2
                    };
                    var originalImageURL = $image.attr('src');
                    var uploadedImageName = 'cropped.jpg';
                    var uploadedImageType = 'image/jpeg';
                    var uploadedImageURL;


                    // Tooltip
                    //$('[data-toggle="tooltip"]').tooltip();


                    // Cropper
                    $image.on({
                        ready: function (e) {
                            console.log(e.type);
                        },
                        cropstart: function (e) {
                            console.log(e.type, e.detail);
                        },
                        cropmove: function (e) {
                            console.log(e.type, e.detail.action);
                        },
                        cropend: function (e) {
                            console.log(e.type, e.detail.action);
                        },
                        crop: function (e) {
                            console.log(e.type);
                            var result;
                            result = $image.cropper("getCroppedCanvas", { "width": 300, "height": 200,"fillColor":'#f6f6f6' }, "");
                            $(".pre-img").attr('src', result.toDataURL(uploadedImageType));
                            $("#photo_base64").attr('value', result.toDataURL(uploadedImageType));
                        },
                        zoom: function (e) {
                            console.log(e.type, e.detail.ratio);
                        }
                    }).cropper(options);


                    // Methods
                    $('.docs-buttons').on('click', '[data-method]', function () {
                        var $this = $(this);
                        var data = $this.data();
                        var cropper = $image.data('cropper');
                        var cropped;
                        var $target;
                        var result;

                        if ($this.prop('disabled') || $this.hasClass('disabled')) {
                            return;
                        }

                        if (cropper && data.method) {
                            data = $.extend({}, data); // Clone a new one

                            if (typeof data.target !== 'undefined') {
                                $target = $(data.target);

                                if (typeof data.option === 'undefined') {
                                    try {
                                        data.option = JSON.parse($target.val());
                                    } catch (e) {
                                        console.log(e.message);
                                    }
                                }
                            }

                            cropped = cropper.cropped;

                            switch (data.method) {
                                case 'rotate':
                                    if (cropped && options.viewMode > 0) {
                                        $image.cropper('clear');
                                    }

                                    break;

                                case 'getCroppedCanvas':
                                    if (uploadedImageType === 'image/jpeg') {
                                        if (!data.option) {
                                            data.option = {};
                                        }

                                        data.option.fillColor = '#fff';
                                    }

                                    break;
                            }

                            result = $image.cropper(data.method, data.option, data.secondOption);

                            switch (data.method) {
                                case 'rotate':
                                    if (cropped && options.viewMode > 0) {
                                        $image.cropper('crop');
                                    }

                                    break;

                                case 'scaleX':
                                case 'scaleY':
                                    $(this).data('option', -data.option);
                                    break;

                                case 'getCroppedCanvas':
                                    if (result) {
                                        // Bootstrap's Modal
                                        $('#getCroppedCanvasModal').modal().find('.modal-body').html(result);

                                        if (!$download.hasClass('disabled')) {
                                            download.download = uploadedImageName;
                                            $download.attr('href', result.toDataURL(uploadedImageType));
                                        }
                                    }

                                    break;

                                case 'destroy':
                                    if (uploadedImageURL) {
                                        URL.revokeObjectURL(uploadedImageURL);
                                        uploadedImageURL = '';
                                        $image.attr('src', originalImageURL);
                                    }

                                    break;
                            }

                            if ($.isPlainObject(result) && $target) {
                                try {
                                    $target.val(JSON.stringify(result));
                                } catch (e) {
                                    console.log(e.message);
                                }
                            }

                        }
                    });

                    // Keyboard
                    $(document.body).on('keydown', function (e) {

                        if (!$image.data('cropper') || this.scrollTop > 300) {
                            return;
                        }
                        switch (e.which) {
                            case 37:
                                e.preventDefault();
                                $image.cropper('move', -1, 0);

                                break;

                            case 38:
                                e.preventDefault();
                                $image.cropper('move', 0, -1);

                                break;

                            case 39:
                                e.preventDefault();
                                $image.cropper('move', 1, 0);

                                break;

                            case 40:
                                e.preventDefault();
                                $image.cropper('move', 0, 1);

                                break;
                        }

                    });




                    // Import image
                    var $inputImage = $('#photo');

                    if (URL) {
                        $inputImage.change(function () {
                            var files = this.files;
                            var file;

                            if (!$image.data('cropper')) {
                                return;
                            }

                            if (files && files.length) {
                                file = files[0];

                                if (/^image\/\w+$/.test(file.type)) {
                                    uploadedImageName = file.name;
                                    uploadedImageType = file.type;

                                    if (uploadedImageURL) {
                                        URL.revokeObjectURL(uploadedImageURL);
                                    }

                                    uploadedImageURL = URL.createObjectURL(file);
                                    $image.cropper('destroy').attr('src', uploadedImageURL).cropper(options);
                                    $inputImage.val('');
                                } else {
                                    window.alert('Please choose an image file.');
                                }
                            }
                        });
                    } else {
                        $inputImage.prop('disabled', true).parent().addClass('disabled');
                    }
                    $(".cropper-ok").click(function () {

                        var result;

                        result = $image.cropper("getCroppedCanvas", { "width": 300, "height": 200,"fillColor":'#fff' }, "");
                        $(".pre-img").attr('src', result.toDataURL(uploadedImageType));
                        console.log(result);
                        console.log("000");
                    })

                });

            </script>

     
     
            <include file="Index:footer"/>
        </div>
  
</body>
</html>
